<template>
	<div>
		<div class="bigBox content-box">
			<div class="title">
				<p>仓储租赁</p>
			</div>
			<div class="banner">
				<el-carousel height="350px" :interval="5000" arrow="always">
					<el-carousel-item v-for="item in imgurl" :key="item.id">
					<img class="bannerImg" :src="item.url" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="formBox">
				<div class="top flexBox">
					<span style="margin-right:5px">单价：</span>
					<el-checkbox-group v-model="price">
						<el-checkbox :label="13">13㎡</el-checkbox>
						<el-checkbox :label="15">15㎡</el-checkbox>
						<el-checkbox :label="20">20㎡</el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="center">
					<div class="flexBox">
						<span style="margin-right:5px">区域：</span>
						<el-checkbox-group v-model="address">
							<el-checkbox :label="1">一期</el-checkbox>
							<el-checkbox :label="2">二期</el-checkbox>
						</el-checkbox-group>
					</div>
					<div class="addressListBox">
						<el-checkbox-group v-model="addressList">
							<el-checkbox label="A">A区</el-checkbox>
							<el-checkbox label="B">B区</el-checkbox>
							<el-checkbox label="C">C区</el-checkbox>
							<el-checkbox label="D">D区</el-checkbox>
							<el-checkbox label="E">E区</el-checkbox>
							<el-checkbox label="F">F区</el-checkbox>
							<el-checkbox label="G">G区</el-checkbox>
						</el-checkbox-group>
					</div>
					<div class="btnBox">
						<el-button size="mini" type="primary" @click="inquire">查询</el-button>
						<el-button size="mini" @click="reset">重置</el-button>
					</div>
				</div>
			</div>
			<div class="contentBox">
				<el-collapse v-model="activeNames">
					<el-collapse-item :name="i" v-for="(item, i) in addressArr" :key="i">
						<template slot="title">
							<div class="title-indet">
								{{ item.projectRegionStage }}期({{ item.projectRegionId }}区)
							</div>
							<div class="title-indet" @click="stopProp">
								<el-button class="map" size="mini" @click="shouimg">显示平面图</el-button>
							</div>
						</template>
						<div class="imgBox">
							<el-popover placement="left" v-for="(item2, i2) in item.projectList" :disabled='item2.projectStatus === 1 || item2.projectStatus===3' :key="i2" width="200" trigger="hover">
								<div class="itemBox" slot="reference">
									<div class="cosImg" v-show="item2.projectStatus === 1">
										<img :src="chooesimg" />
										<img class="yizu" :src="haveFinished" />
									</div>
									<div class="cosImg" v-show="item2.projectStatus === 3">
										<img :src="chooesimg" />
										<img class="yizu" :src="sale" />
									</div>
									<div class="cosImg" v-show="item2.projectStatus === 2" @click="chooseStorage(item2)">
										<img v-show="item2.status == false" :src="ischooesimg" />
										<img v-show="item2.status == true" :src="chooesimg" />
									</div>
									<div class="cosImg" v-show="item2.projectStatus === 4" @click="chooseStorage(item2)">
										<img v-show="item2.status == false" :src="ischooesimg" />
										<img v-show="item2.status == true" :src="chooesimg" />
									</div>
									<span class="txt">{{ item2.projectName }}
									</span>
								</div>
								<div class="housingIntroduced">
									<p class="updataTime" style="margin-bottom: 15px;">发布时间：{{ item2.updateDate }}</p>
									<p style="margin-bottom:15px;">
										<span>展场面积{{ item2.projectArea }}m²</span>
									</p>
									<div style="margin-bottom: 15px;">
										单价:
										<span class="unit-price" style="color: red;">{{ item2.projectUnitPrice }}</span>
										/m².月
									</div>
									<p v-show="isCoupon" style="margin-bottom: 15px;">
										优惠活动：
										<span
											class="discounts"
											style="
											padding: 5px;
											background-color: rgb(236, 128, 141);
											color: #fff; "
										>免延一个月</span>
									</p>
									<p style="margin-bottom: 15px;">
									市场服务：
										<span 
											class="clean-keeping"
											style="margin-right: 5px;
												padding: 5px;
												background-color: rgb(24, 144, 255);
												color: #fff; "
											>保洁</span
										>
										<span
											class="broadband"
											style="
												padding: 5px;
												background-color: rgb(24, 144, 255);
												color: #fff; "
											>管带办理</span
										>
										<span class="el-icon-arrow-down"></span>
									</p>
								</div>
							</el-popover>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		<div id="toolBar">
			<div class="statistics">
				<div style="color: #606266;">
					<el-checkbox v-model="checked" @change="toggleSelection">全选</el-checkbox>
					<span style="margin-left:50px">已选房屋
						<span style="color: #E87224;">{{ multipleSelection.length }}</span>间
					</span>
					<span style="margin-left:15px">房屋总面积
						<span style="color: #E87224;">{{ selectnum }}</span>㎡
					</span>
				</div>
				<div class="othBtn">
					<el-button size="mini" type="primary" style="margin-left:70px" @click="consult">电话咨询</el-button>
					<el-button size="mini" type="primary" @click="shouDig">预约看房</el-button>
					<el-button size="mini" type="primary" @click="confirm">确认订房</el-button>
				</div>
			</div>
		</div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div class="iscenter">
          <el-form ref="formR" :model="form" label-width="100px" :rules="rules">
            <div class="formsty">
                  <el-form-item label="预约人姓名:" prop="appointmentName" >
                      <el-input v-model="form.appointmentName" style="width:80%"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:" prop="appointmentPhone">
                      <el-input v-model="form.appointmentPhone" style="width:80%"></el-input>
                    </el-form-item>
                    <el-form-item label="预约时间:" prop="appointmentDate">
                      <el-date-picker v-model="form.appointmentDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 80%;margin-left:0;"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预约房屋:">
                      <div>
                        <span style="margin-right: 10px;" class="housingContract" v-for="(item, i) in lookApartment" :key="i">{{ item }}</span>
                      </div>
                    </el-form-item>
                    <div class="btn">
                      <el-button @click="handleClose">取消</el-button>
                      <el-button type="primary" @click="submit">确定</el-button>
                    </div>
                      
                  
              </div>
          </el-form>
        </div>
		</el-dialog>
		<el-dialog title="电话咨询" :visible.sync="isconsult" width="25%" class="centerx"   :before-close="consultClose">
      <div style=" height: 50px;text-align: center; position: relative;">
        <div class="isconsulty"><H3>请拨打客服电话<i class="el-icon-phone">:</i>029-8848421</H3></div>
      </div>
    </el-dialog>
		<el-dialog class="plane-dialog" :visible.sync="dialogVisibleImg" width="40%" :before-close="imgClose">
			<img :src="planeImg" alt="" width="100%" />
		</el-dialog>
	</div>
</template>
<script>
import { getItem, setItem } from '@/utils/store.js'
export default {
  data() {
    return {
		checked: false,
		planeImg: require("@/assets/pic13.png"),
		isCoupon: false,
      selectnum: 0,
      selectArr: [],
      isconsult: false,
      dialogVisible: false,
      dialogVisibleImg: false,
      useImg: require('@/assets/icon10.png'),
      ischooesimg: require('@/assets/icon9.png'),
      chooesimg: require('@/assets/icon12.png'),
      haveFinished: require('@/assets/ico12.png'),
      sale:require('@/assets/icon-sale.png'),
      activeNames: [],
      addressList: [],
      address: [],
      price: [],
      index: '',
      lookApartment: [] /* 选中的房屋名 */,
      form: {
        /* 预约看房商户的信息 */
        buildingType: 'exhibition',
        appointmentName: '',
        appointmentPhone: '',
        appointmentDate: '',
        companyName: '',
        userType: '',
        companyId: '',
        projectIds: []
      },
      screenForms: {
        buildingType: 'exhibition'
      },
      imgurl: [
        {
          id: 1,
          url: require('@/assets/banner.png')
        },
        {
          id: 2,
          url: require('@/assets/banner.png')
        },
        {
          id: 3,
          url: require('@/assets/banner.png')
        }
      ],
      addressArr: [],
      // 校验规则
      rules: {
        appointmentName: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        appointmentPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        appointmentDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      },
      // 判断是否进行了认证
      isauth: '',
      multipleSelection: [],
      chooesHoseId: []
    }
  },
  created() {
    this.HousesLists()
    this.isauths()
	this.getCoupon()
  },
  methods: {
    chooseStorage(item) {
      let that = this
		that.checked = false
      //选择仓储
      if (item.status == false) {
        item.status = true
        that.multipleSelection.push(item)
		that.selectnum =(that.selectnum*1000 + item.projectArea*1000)/1000
        // console.log(that.multipleSelection)
      } else {
        let deleteId = item.id
        that.multipleSelection.forEach((item2, i2) => {
          if (item2.id == deleteId) {
            that.multipleSelection.splice(i2, 1)
			that.selectnum =(that.selectnum*1000 - item.projectArea*1000)/1000
            item.status = false
            return
          }
        })
        // that.multipleSelection.splice(i, 1)
      }
    },
    reset() {
      //重置
      this.screenForms = {}
      this.screenForms.buildingType = 'exhibition'
		this.addressList = []
		this.address = []
		this.price = []
      this.HousesLists()
    },
    consult() {
      //电话咨询弹窗
      this.isconsult = true
    },
    consultClose() {
      //电话咨询弹窗关闭
      this.isconsult = false
    },
    inquire() {
      // 查询
      if (this.address) {
        this.screenForms.projectRegionStage = this.address //期数
      }
      if (this.price) {
        this.screenForms.projectUnitPrice = this.price //单价
      }
      if (this.addressList) {
        this.screenForms.projectRegionId = this.addressList //区
      }
		this.multipleSelection = []
		this.selectnum = 0
      this.HousesLists()
    },
    // 判断是否已经认证
    async isauths() {
      let that = this
      let id = getItem('XIE_XIN').user_id
      let parentId = getItem('USER_INFO').data.data.parentId
      const { data: res } = await that.$http.get(`/account/sysuser/isauth/${id}`, {
        params: parentId
      })
      this.isauth = res.data
    },
	async getCoupon() {
		let that = this
		let id = getItem('XIE_XIN').user_id
		let companyId = getItem('USER_INFO').data.data.companyId
		let params = {
			id:companyId
		}
		const { data: res } = await that.$http.get(`/config/remote/sysCoupon/rt/findSysCouponByCompanyId/${id}`, {
			params: params
		})
		if(res.code == 0 && res.data){
			that.isCoupon = true
		}
	},
	
    imgClose() {
      // 展示图片
      this.dialogVisibleImg = false
    },
    shouDig() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          type: 'warning',
          offset: 200,
          message: `请选择需要预约的展场`
        })
        return
      }
      if (this.isauth) {
        this.dialogVisible = true
        this.multipleSelection.forEach(e => {
          this.lookApartment.push(e.projectName)
          this.chooesHoseId.push(e.id)
        })
        this.form.projectIds = this.chooesHoseId
        //获取用户个人信息
        //缺一个条件判断
        let user = getItem('USER_INFO')
        console.log(user)
        let companyId = getItem('USER_INFO').data.data.companyId
        let isCompany = getItem('USER_INFO').data.data.isCompany
        let isPerson = getItem('USER_INFO').data.data.isPerson
        let companyName = getItem('USER_INFO').data.data.companyName
        let person = getItem('USER_INFO').data.data.person.idName
        let userid = getItem('XIE_XIN').user_id
        console.log(companyId, +'公司id')
        if (isCompany == '1') {
          this.form.userType = '2'
          this.form.companyId = companyId
          this.form.userId = ''
          this.form.companyName = companyName
        }
        if (isPerson == '1') {
          this.form.userType = '1'
          this.form.userId = userid
          this.form.companyId = ''
          this.form.companyName = person
        }
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: `请先进行个人认证`
        })
      }
    },
    shouimg() {
      this.dialogVisibleImg = true
    },
    submit() {
      this.$refs.formR.validate(async valid => {
        if (valid) {
          console.log(this.form)
          let data = this.form
          const { data: res } = await this.$http.post('/order/webAppointment/add', {
            ...data
          })
          if (res.code == 0) {
            this.$message({
              message: '恭喜您，预约成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          }
          this.dialogVisible = false
          this.lookApartment = []
          this.chooesHoseId = []
        } else {
          return this.$message({
            type: 'warning',
            offset: 200,
            message: `请根据条件填写信息`
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.lookApartment = []
      this.chooesHoseId = []
    },
    async HousesLists() {
      let that = this
		console.log(getItem('USER_INFO'))
		console.log(getItem('XIE_XIN'))
      const { data: res } = await that.$http.get('rentserver/project/exhibition', {
        params: that.screenForms
      })
      console.log(res)
		this.addressArr = res.data
		if(res.data){
			for (let i = 0; i < this.addressArr.length; i++) {
			this.addressArr[i].projectList.forEach(e => {
				this.$set(e, 'status', false)
			})
		}
	}
      
      console.log(this.addressArr)
      if (res.code !== 0) {
        return that.$message.error('获取房屋信息失败！')
      }
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    stopProp(e) {
      e.stopPropagation()
    },
    confirm() {
      let that = this
      if (that.isauth == true) {
        if (that.multipleSelection.length !== 0) {
          that.multipleSelection.forEach(e => {
            that.chooesHoseId.push(e.id)
          })
          setItem('storageChooesLists', that.chooesHoseId)
          that.$router.push({ path: '/warehousing' })
          // this.$router.push({ name: 'orderInformation', params: { id: 9898 } })
          return
        }
        that.$message({
          type: 'warning',
          offset: 200,
          message: `请选择仓储查看`
        })
      } else {
        that.$message({
          type: 'warning',
          offset: 200,
          message: `请完成个人认证或者企业认证`
        })
      }
      // this.$router.push({ name: 'warehousing', param: { id: 1 } })
      // this.$router.push({ path: '/warehousing', query: { id: [2672, 2671] } })
    },
	
	toggleSelection() {
		let that = this
		that.multipleSelection = []
		that.selectnum = 0
		if(that.checked){
			if (that.addressArr.length !== 0) {
				that.addressArr.forEach(e => {
					e.projectList.forEach(item => {
						if(item.projectStatus == 2 || item.projectStatus ==4){
							item.status = true
							that.multipleSelection.push(item)
							that.selectnum =(that.selectnum*1000 + item.projectArea*1000)/1000
						}
					})			
				})
			}
		}else{
			if (that.addressArr.length !== 0) {
				that.addressArr.forEach(e => {
					e.projectList.forEach(item => {
						if(item.projectStatus == 2 || item.projectStatus ==4){
							item.status = false
						}
					})			
				})
			}
			that.multipleSelection = []
			that.selectnum = 0
		}
	}
  }
}
</script>
<style lang="less">
@import './index.less';
.title-indet{
	text-indent: 30px;
}
.iscenter{
  width: 70%;
  margin: 0 auto;
  .btn{
   text-align: center;
  }
  .formsty{
     margin: 0 auto;
  }
  
}
.el-collapse-item__header {
  color: black;
  font-size: 22px;
  background: #f7f7f7 url('../../assets/titleImg.png');
  height: 60px;
  line-height: 0px;
}
#toolBar{
	position: fixed;
	bottom: 0px;
	background:#DADBDB;
	width: 100%;
	height: 50px;
	z-index: 3;
}

.bigBox .formBox .flexBox {
    display: flex;
    align-items: center;
}
.el-collapse-item__arrow{
    transform: rotate(-90deg);
	color: #FFF;
	background-color: #409EFF;
	border-color: #409EFF;
	border-radius: 50px;
	padding: 5px;
}
.plane-dialog .el-dialog__header {
	padding: 0px;
}

.plane-dialog .el-dialog__body {
	padding: 0px;
	border: 1px solid #409EFF;
	font-size: 0;
}

.plane-dialog .el-dialog__headerbtn {
	top: -14px;
	right: -26px;
	font-size: 24px;
	background-color: #DBD9D9;
	
	border-radius: 40px;
	width: 28px;
	height: 28px;
}
.centerx{
  margin-top:10%;
  .isconsulty{
    width: 100%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
}
.plane-dialog .el-dialog__headerbtn .el-dialog__close {
	color: #fff;
}
.contentBox .el-collapse-item{
	padding-bottom: 10px;
}
</style>
